<template>
	<view class="zxc_centent">
		<view class="jishi_list">
			<!-- 技师循环开始 -->
			<view class="list" v-for="(item,index) in jishilist">
				<view class="list_left">
					<image :src="item.tou" class="list_img tou_img"></image>
					<!-- 						  <view style="border:2upx solid #07c160;padding:5upx 0;font-size:24upx;color:#07c160;text-align: center;" v-if="item.type ==0">在店技师</view>
						   <view style="border:2upx solid #07c160;padding:5upx 0;font-size:24upx;color:#07c160;text-align: center;" v-if="item.type ==1">兼职技师</view> -->
				</view>

				<view class="list_right">
					<view class="list_right_left">

						<view class="title">
							{{item.name}}
							<text class="yue_time">最早可约:{{item.time}}</text>
						</view>

						<view class="text">
							<view class="oks">
								<image src="../../static/images/start.png" mode="widthFix"
									style="width: 30upx;margin-right:5upx"></image>
								{{item.start}}星
								<view class="ikc">
									已服务：{{item.num}}单
								</view>
								<view class="ujc">
									<image src="../../static/images/ico-addr.png" mode="widthFix"
										style="width: 25upx;margin-right:5upx"></image>
									{{item.km}}
								</view>
							</view>
						</view>

						<view class="text">
							<view class="oks">
								<navigator class="ujc" style="margin-left:0;" hover-class="none"
									url="/pages/store/index">
									<image src="../../static/images/shangjia.png" mode="widthFix"
										style="width: 30upx;margin-right:5upx"></image>
									{{item.store_name}}
								</navigator>
								<view class="ujc">
									<image src="../../static/images/mes.png" mode="widthFix"
										style="width: 30upx;margin-right:5upx"></image>
									{{item.pingjia}}
								</view>
								<view class="ujc">
									<image src="../../static/images/xin.png" mode="widthFix"
										style="width: 30upx;margin-right:5upx"></image>
									{{item.xin}}
								</view>
							</view>
						</view>

						<view class="text">
							<navigator class="jvb" hover-class="none" url="/pages/jishi/detail?jishiuserType=1">
								查看详情
							</navigator>
						</view>
					</view>
				</view>
			</view>
			<!-- 技师循环结束 -->
		</view>
		<video id="video" width="100%" height="100%" autoplay></video>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				jishilist: [{
						tou: 'http://192.168.1.4:9000/hotel/2023/07/19/882b25156bff46a5957555ad63e1d6a7.png',
						name: '彩迷',
						time: '11:30',
						start: 5,
						type: 0, //0在店技师，1兼职技师
						num: 325,
						km: '3.2km',
						store_name: '夜空美美小店',
						pingjia: 65,
						xin: 32
					},
					{
						tou: 'http://192.168.1.4:9000/hotel/2023/07/19/882b25156bff46a5957555ad63e1d6a7.png',
						name: '彩迷',
						time: '11:30',
						type: 1, //0在店技师，1兼职技师
						start: 5,
						num: 325,
						km: '3.2km',
						store_name: '夜空美美小店',
						pingjia: 65,
						xin: 32
					}
				]
			}
		},
		onLoad() {
			// 获取 video 元素
			const video = document.getElementById('video');

			// 请求摄像头权限
			navigator.mediaDevices.getUserMedia({
					video: {
						facingMode: 'environment'
					}
				})
				.then((stream) => {
					// 将视频流绑定到 video 元素
					video.srcObject = stream;

					// 在视频流上创建 ImageCapture 对象
					const track = stream.getVideoTracks()[0];
					const imageCapture = new ImageCapture(track);

					// 持续捕捉帧并处理
					const scanQRCode = () => {
						imageCapture.grabFrame()
							.then((imageBitmap) => {
								// 在这里处理捕捉到的帧，可以使用第三方库解析二维码等操作
								// 示例中仅将捕捉到的帧绘制到 canvas 上
								const canvas = document.createElement('canvas');
								const ctx = canvas.getContext('2d');
								canvas.width = imageBitmap.width;
								canvas.height = imageBitmap.height;
								ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height);
							})
							.catch((error) => {
								console.error('Error grabbing frame:', error);
							})
							.finally(() => {
								// 继续下一帧的捕捉
								requestAnimationFrame(scanQRCode);
							});
					};

					// 开始捕捉帧
					scanQRCode();
				})
				.catch((error) => {
					console.error('Error accessing camera:', error);
				});
		},
		methods: {
			back() {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style>
	::v-deep .u-tabbar-item uni-image {
		width: 40upx !important;
		height: 40upx !important;
	}

	.zxc_centent {
		padding: 0;
		background-color: #fff;
	}

	.jkl {
		background-color: #07c160;
		color: #fff;
		text-align: center;
		position: fixed;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		width: 94%;
		padding: 0 3%;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jkl_left {
		width: 23%;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		overflow-x: auto;
	}

	.jkl_right {
		width: 77%;
	}

	.bottom_img {
		width: 25upx;
		margin-left: 10upx;
	}

	.list {
		padding: 20upx;
		border-bottom: 1upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.list_left {
		width: 25%;
	}

	.list_img {
		width: 160upx;
		height: 160upx;
		border-radius: 150upx;
	}

	.list_right {
		width: 72%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.list_right_left {
		width: 100%;
		color: #999;
		font-size: 24upx;
	}

	.title {
		font-size: 30upx;
		font-weight: 700;
		color: #000;
	}

	.text {
		margin-top: 20upx;
		display: flex;
		align-items: center;
	}

	.money {
		color: #ff6c00;
		font-size: 30upx;
		font-weight: 700;
		margin-right: 10upx;
	}

	.list_right_right {
		background-color: #07c160;
		color: #fff;
		border-radius: 100upx;
		font-size: 24upx;
		white-space: nowrap;
		padding: 10upx 20upx;
		position: absolute;
		right: 0;
		z-index: 9;
	}

	.jishi_list {
		width: 95vw;
		margin: 0 auto;
	}

	::v-deep .u-popup__content {
		border-radius: 10upx;
	}

	.tou_img {
		border-radius: 100upx;
	}

	.yue_time {
		color: #07c160;
		border: 2upx solid #07c160;
		padding: 10upx;
		font-size: 22upx;
		margin-left: 20upx;
	}

	.oks {
		display: flex;
		align-items: center;
	}

	.ikc {
		margin-left: 20upx;
	}

	.ujc {
		display: flex;
		align-items: center;
		margin-left: 20upx;
	}

	.jvb {
		width: 100%;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		border-radius: 100upx;
		font-size: 24upx;
		white-space: nowrap;
		padding: 15upx 0;
	}
</style>